<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row type="flex" justify="space-between" style="margin-bottom: 20px;">
          <div class="header">
            <span class="info">说明：目前支持学科条件筛选</span>
          </div>
          <div class="btn">
            <el-button @click="$router.push('new')" type="success" size="small" round><i style="margin-right:10px" class="el-icon-edit"></i>新增试题</el-button>
          </div>
        </el-row>
        <el-form :inline="true" ref="formRef" :model="form" label-width="70px">
          <el-form-item label="学科">
            <el-select @change="changeSubject" v-model="form.subjectID" style="width:100%;" size="small" placeholder="请选择">
              <el-option v-for="item in subjectsList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="二级目录">
            <el-select v-model="form.twoLevelDirectory" size="small" placeholder="请选择">
              <el-option v-for="item in directoryList" :key="item.id" :label="item.directoryName" :value="item"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="标签">
            <el-select v-model="form.tags" size="small" placeholder="请选择">
             <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input size="small" style="width:107%" v-model="form.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
           <el-form-item label="试题类型">
            <el-select v-model="form.questionType" size="small" placeholder="请选择">
              <el-option v-for="item in questionType" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="难度">
            <el-select v-model="form.difficulty" size="small" placeholder="请选择">
              <el-option v-for="item in difficulty" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="方向">
            <el-select v-model="form.direction" size="small" placeholder="请选择">
              <el-option v-for="item in direction" :key="item.id" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="form.creatorID" size="small" placeholder="请选择">
              <el-option v-for="item in creatorList" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-right:27px" label="题目备注">
            <el-input size="small" style="width:107%" v-model="form.remarks"></el-input>
          </el-form-item>
          <el-form-item style="margin-right:25px" label="企业简称">
            <el-input size="small" style="width:107%" v-model="form.shortName"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select @change='changeProvince' size="small" style="width:30%;" v-model="form.province" placeholder="请选择">
              <el-option v-for="item in provinces" :key="item.id" :label="item" :value="item"></el-option>
            </el-select>
            <el-select size="small" style="width:30%" v-model="form.city" placeholder="请选择">
             <el-option v-for="item in citys" :key="item.id" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left:-20px" size="small" @click="resetBtn">清除</el-button>
            <el-button size="small" type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>

        <!-- tags卡片导航 -->
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in listState" :key='item.id' :label="item.label" :name="item.value"></el-tab-pane>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"><i class="el-icon-info"></i>数据一共{{total}}条</div></el-col>
            </el-row>
            <!-- 表格区域 -->
            <template>
              <el-table
                :data="choiceList"
                style="width: 100%;margin-top:20px">
                <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
                <el-table-column prop="subject" label="学科" width="120"></el-table-column>
                <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
                <el-table-column prop="questionType" label="题型" width="120">
                  <!-- 题型转换 -->
                  <template #default="{row}">
                    {{transQuestions(row.questionType)}}
                  </template>
                </el-table-column>
                <el-table-column prop="question" label="题干" width="300">
                  <!-- 题干转换 -->
                  <template #default="{row}">
                    <p v-html='row.question'></p>
                  </template>
                </el-table-column>
                <el-table-column prop="addDate" label="录入时间" width="180">
                  <!-- 时间转换 -->
                  <template #default="{row}">
                    {{transTime(row.addDate)}}
                  </template>
                </el-table-column>
                <el-table-column prop="difficulty" label="难度" width="150">
                  <!-- 难度转换 -->
                  <template #default="{row}">
                    {{transDifficulty(row.difficulty)}}
                  </template>
                </el-table-column>
                <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
                <el-table-column prop="chkState" label="审核状态" width="120">
                  <!-- 审核状态转换 -->
                  <template #default="{row}">
                    {{transChkState(row.chkState)}}
                  </template>
                </el-table-column>
                <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
                <el-table-column prop="chkUser" label="审核人" width="300"></el-table-column>
                <el-table-column prop="publishState" label="发布状态" width="120">
                  <!-- 发布状态转换 -->
                  <template #default="{row}">
                    {{transPublishState(row)}}
                    <!-- {{transPublishState(row.publishState)}} -->
                  </template>
                </el-table-column>
                <!-- scope.row.chkRemarks!==null -->
                <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button @click="previewQuest(scope.row)" type="text" size="small">预览</el-button>
                    <el-button :disabled='scope.row.chkState!==0' @click='checkQuest(scope.row)' type="text" size="small">审核</el-button>
                    <el-button :disabled='scope.row.publishState===1' type="text" size="small" @click='editQuest(scope.row)'>修改</el-button>
                      <el-button type="text" size="small" @click.native='handleState(scope.row)'>
                        <span v-if='scope.row.publishState===0'>上架</span>
                        <span v-else>下架</span>
                      </el-button>
                    <el-button type="text" size="small" @click='delQuest(scope.row)' :disabled='scope.row.publishState===1'>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tabs>
         </template>
        <!-- 分页器功能 -->
        <el-pagination
          style="margin-left:800px;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total">
        </el-pagination>
      </el-card>

      <!-- 预览试题弹窗子组件 -->
      <question-preview ref='previewRef' @close-prevdialog='closePrevDialog' :dialogShow='previewQuestShow'/>

      <!-- 修改试题弹窗子组件 -->
      <question-check ref='checkRef' @update-table='tableList' @close-checkdialog='closeCheckDialog' :show-checkdialog='checkQuestShow'/>
    </div>
  </div>
</template>

<script>
import {list} from '@/api/hmmm/subjects'
import {list as directorysList} from '@/api/hmmm/directorys'
import {list as tagsList} from '@/api/hmmm/tags'
import { simple as creatorSimple } from "@/api/base/users.js";
import {provinces,citys} from '@/api/hmmm/citys'
import {choice,choicePublish,choiceAdd,choiceCheck} from '@/api/hmmm/questions'
import {questionType,difficulty,direction} from '@/api/hmmm/constants'
import dayjs from 'dayjs'
import questionPreview from '@/module-hmmm/components/questions-preview'
import questionCheck from '@/module-hmmm/components/questions-check'
export default {
  components:{
    questionPreview,
    questionCheck
  },
  data(){
    return {
      form:{
        subjectID:'',
        // twoLevelDirectory:'',
        tags:'',
        keyword:'',
        questionType:'',
        difficulty:'',
        direction:'',
        creatorID:'',
        remarks:'',
        shortName:'',
        citys:'',
        catalogID:'',
        province:'',
        subjectName:'',
        chkState:''
      },
      // 录入人列表
      creatorList:[],
      directoryList:[],
      tagsList:[],
      subjectsList:[],
      questionType:questionType,
      provinces:[],
      citys:[],
      difficulty:difficulty,
      direction:direction,
      // 录入人筛选
      creator:[],
      total:0,
      choiceList:[],
      params:{
        page:1,
        pagesize:10
      },
      activeName:'4',
      listState:[
        {value:'4',label:'全部'},
        {value:'0',label:'待审核'},
        {value:'1',label:'已审核'},
        {value:'2',label:'已拒绝'}
      ],
      // 预览试题弹窗
      previewQuestShow:false,
      // 修改试题弹窗
      checkQuestShow:false
    }
  },

    mounted(){
    this.fetchSubjectList()
    this.tableList()
    this.province()
    this.getCreatorList()
  },
  methods:{
    async tableList(){
      const res = await choice({
        ...this.params
      })
      // console.log(res)
      this.total=res.data.counts
      this.choiceList=res.data.items
      // console.log(res)
    },
    async fetchSubjectList(){
      // 获取学科列表接口
      const {data} = await list()
      // console.log(data)
      this.subjectsList=data.items
    },
    // 获取录入人列表
    async getCreatorList(){
      const res = await creatorSimple()
      this.creatorList=res.data
    },
    // 题型转换
    transQuestions(value){
      const TYPES = {
        1:'单选',
        2:'多选',
        3:'简答'
      }
      return TYPES[value]
    },
    // 时间转换
    transTime(value){
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    // 难度转换
    transDifficulty(value){
      const TYPES = {
        1:'简单',
        2:'一般',
        3:'困难'
      }
      return TYPES[value]
    },
    // 审核状态转换
    transChkState(value){
      const TYPES = {
        0:'待审核',
        1:'已审核',
        2:'已拒绝'
      }
      return TYPES[value]
    },
    transPublishState(value){
      if(value.chkState===0){
      return value.publishState='待发布'
      }
      const TYPES = {
        0:'已下架',
        1:'已发布',
        2:'待发布'
      }
      return TYPES[value.publishState]
    },
    handleSizeChange(size){
      this.params.pagesize=size
      // 当修改展示每页几条时 强制将当前页设置成第 1 页
      this.params.page=1
      this.tableList()
    },
     handleCurrentChange(num){
      this.params.page=num
      this.tableList()
    },
    resetBtn(){
      this.directoryList=[]
      this.tagsList=[]
      this.$refs.formRef.resetFields()
      this.form={
        subjectID:'',
        // twoLevelDirectory:'',
        tags:'',
        keyword:'',
        questionType:'',
        difficulty:'',
        direction:'',
        creatorID:'',
        remarks:'',
        shortName:'',
        city:'',
        region:''
      }
      // 刷新列表
    this.tableList()
    },
    async searchBtn(){
      // console.log(val)
      // this.tableList()
      this.params={
        page:1,
        pagesize:10
      }
      const a = {
        ...this.params,
        subjectID:this.form.subjectID,
        keyword:this.form.keyword
      }
      const res = await choice(a)
      // console.log(res,this.form.keyword)
      this.total=res.data.counts
      this.choiceList=res.data.items
    },
    // 控制 tabs栏功能
    async handleClick({name}){
      // 回调函数里面能拿到实例对象
      if(name==='4'){
        this.tableList()
      }else {
        const res = await choice({
        ...this.params,
        chkState:name
      })
      this.total=res.data.counts
      this.choiceList=res.data.items
      }
    },
    // 预览试题
    previewQuest(id){
      this.previewQuestShow=true
      this.$refs.previewRef.fetchQuestionsList(id)
      console.log(id)
    },
    // 关闭试题预览弹窗
    closePrevDialog(){
      this.previewQuestShow=false
    },
    // 改变了学科选项
    async changeSubject(id){
      this.directoryList=[]
      this.tagsList=[]
      // console.log(id)
      const {data} = await directorysList({subjectID:id})
      // console.log(data)
      // const {data} = await simple({subjectID:id})
      this.directoryList=data.items
      const res = await tagsList({subjectID:id})
      // console.log(res)
      this.tagsList=res.data.items
      // console.log(this.provinces)
    },
    // 处理省的接口函数
    province(){
      this.provinces=provinces()
    },
    // 改变了省
    async changeProvince(pname){
      this.citys=citys(pname)
      console.log(pname)
    },
    // 打开审核弹窗
    checkQuest(id){
      this.checkQuestShow=true
      this.$refs.checkRef.getId(id)
    },
    // 关闭审核弹窗
    closeCheckDialog(){
      this.checkQuestShow=false
    },

    // 修改试题
    editQuest({id}){
      this.$router.push({
        path:'new',
        query:{
          id:id
        }
      })
    },

    // 上下架状态切换
    handleState(val){
      if(val.publishState===1){
        this.$confirm('您确认下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish(val)
          await choice({
        ...this.params,
        id:val.id,
        // publishState:2
        })
        val.publishState=val.publishState===1?0:1
        }).catch(() => {
        })
      }else{
        this.$confirm('您确认上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // val.publishState=2

          await choicePublish(val)
          // await choiceCheck({
          // chkState:Number(this.form.chkState)
          // })
          // console.log(res)
          await choice({
        ...this.params,
        id:val.id,
        publishState:2
        })
        // console.log(val)
        // console.log(res)
        val.publishState=val.publishState===1?0:1
        }).catch(() => {
        })
      }
    },

    // 删除题目
    delQuest({id}){
       this.$confirm('此操作将永久删除改题目，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await choiceAdd({
            id:id,
            choiceState:0
          })
          // console.log(res)
          this.tableList()
        })
    }


  }
}
</script>

<style scoped>
.header .info {
  font-size: 14px;
  color: #ffc0cb;
}
.grid-content{
  padding: 10px;
  background-color: #f4f4f5;
  color: #909399;
  font-size: 14px;
  border-radius: 7px;
}
.grid-content i {
  margin: 0 10px;
}
</style>
